<template>
<div class="special">
    <van-nav-bar
    title="严选专栏"
    left-arrow
    @click-left="$router.back()"
    />
    <div class="news-box">
        <ul>
            <li v-for="item in list" :key="item.id" class="background"
            :style="{backgroundImage: 'url(' + item.pic + ')'}">
                <h3 v-html="item.title"></h3>
                <p class="ellipsis" v-html="item.descript"></p>
                <button>查看详情</button>
            </li>
        </ul>
    </div>
</div>
    
</template>
<script>
import { getNews } from '@/api'
import { ref } from 'vue'
export default {
    setup() {
        const list = ref([])

        getNews().then(res => {
            list.value = res
        })

        return { 
            list
        }
    }
}
</script>
<style lang="scss" scoped>
    .special {
        height: 100%;
    }
    .news-box {
        background-color: #fff;
        padding: 20px;
        height: calc(100% - 100px);
        overflow: auto;
        li {
            margin-bottom: 20px;
            text-align: center;
            color: #fff;
            height: 368px;
            padding-top: 100px;
            h3 {
                font-size: 34px;
            }
            p {
                width: 500px;
                font-size: 28px;
                margin: 40px auto;
            }

            button {
                background-color: rgba($color: #000000, $alpha: 0);
                width: 180px;
                line-height: 50px;
                border: 1px solid #fff;
                color: #fff;
                border-radius: 50px;
                font-size: 24px;
            }
        }
    }
</style>